<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="<%=basePath %>css/list.css">
		<link href="<%=basePath %>css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<script src="<%=basePath %>js/jquery.min.js"></script>
		<link rel="stylesheet" href="<%=basePath %>lib/icheck/icheck.css">
        <script src="<%=basePath %>lib/My97DatePicker/WdatePicker.js"></script>
        <script src="<%=basePath %>lib/icheck/jquery.icheck.min.js"></script>
		<script src="<%=basePath %>js/H-ui.js"></script>
		<script src="${pageContext.request.contextPath}/lib/bootstrap-modal/2.2.4/bootstrap-modalmanager.js"></script>
        <script src="${pageContext.request.contextPath}/lib/bootstrap-modal/2.2.4/bootstrap-modal.js"></script>
     
        
        <style>
        	.input-text, .textarea{
        		width: auto;
        	}
        </style>
         <script>
	        $(function() {
  		    	$(".hoverShowThisImg").click(function(){
  	    			var src = $(this).attr("id");
  	    			$("#showImg").attr("src","${WF_CONSOLE_CONFIG_OSS_URL}"+src);
  	    			$("#clickShowModal").click();  
  	    		});
	        });
        </script>
       
    </head>
    <body>
    	<div class="connect_wrap">
    	
    	<ul id="Huifold1" class="Huifold">
		  <li class="item">
		    <h4>查询条件<b>+</b></h4>
		    <div class="info" style="border: 1px solid #E8EAEA;padding-bottom: 18px;">
		    	<form action="<%=basePath %>/shoppingCart/shoppingCartList" method="get">
		    		<div class="row">
			    		<div style="float: left;">
			    			<div class="input-group">
							  <span class="input-group-addon">商品名称: </span>
							  <input type="text" class="input-text size-S" name="goodsName" placeholder="通过商品名模糊查询" value="${page.conMap.goodsName}"/>
							   <span class="input-group-addon">用户名称: </span>
							  <input type="text" class="input-text size-S" name="userName" placeholder="通过用户名模糊查询" value="${page.conMap.userName}"/>
    						 
							</div>
			    		</div>
			    	</div>
			    	<br/><br/>
			    	<div class="row">
			    		<div class="col-sm-12">
			    			<input type="submit" value="查询" class="btn btn-primary " style="float: right;"/>
			    		</div>
			    	</div>
			    	<br/>
		    	</form>
		    </div>
		  </li>
		</ul>
    	<br/>
    	<!-- 遍历列表数据 -->
    	<table class="table table-border table-bordered table-striped table-hover">
    		<tr style="font-weight: bold;">
    			<!-- <td>ID</td> -->
    			<td>序号</td>
    			<td>用户名称</td>  
    			<td>商品名称</td>
    			<td>商品类型</td>  
    			<td>商品价格</td>
    			<td>商品规格</td>
    			<td>商品数量</td>  			
    			<td>商品图片</td> 
    		</tr>
    		<c:if test="${not empty page.results}">
    			<c:forEach items="${page.results}" var="result" varStatus="vs">
    			<tr>
    				<td >${(page.actulPageNo -1)*15+vs.count} </td>
    				 <td>${result.userName}</td>
	                <td>${result.goodsName}</td>
	                <td> 
	                 	<c:if test="${result.type eq '1'}">课程</c:if>
	                	<c:if test="${result.type eq '2'}">章节</c:if>
	                	<c:if test="${result.type eq '3'}">vip卡</c:if>
	                	<c:if test="${result.type eq '4'}">商品</c:if>
	                 </td>
	                <td>${result.price}</td>
	                 <td>${result.specification}</td>
	                <td>${result.number}</td>
	                <td><span id="${result.goodsImg}" class="hoverShowThisImg">查看图片</span></td>
	                
	    		</tr>
    		</c:forEach>
    	</c:if>
		</table>
    	</div>
    	
    	<!-- 弹出图片 -->
    	<a data-toggle="modal" href="#myModal" id="clickShowModal" class="btn btn-primary size-L" style="display:none">点击显示</a>
		<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		   <div class="modal-body">
				<img src="" alt="" id="showImg" style="width:100%;height:90%;" />		     	
		   </div>
		</div>    
    	
        <!-- 分页 -->
    	 <div>
	 	<c:if test="${page.totalPageNo > 1 }">
        	<div class="fanye_div">
	            <ul class="fanye">
	                <li>共  ${page.totalCount }  条</li>
	                <li><a href='<%=basePath %>${page.url}?pageNo=1${page.params}'>首页</a></li>
	                  <c:if test="${page.actulPageNo > 1 }">
	                	<li><a href='<%=basePath %>${page.url}?pageNo=${page.actulPageNo -1 }${page.params}'>上一页</a></li>
	                </c:if>
	                <c:forEach var="pno" items="${page.showNums }">
						<c:choose>
							<c:when test="${pno == page.actulPageNo}">
								<li class="current"><a href='<%=basePath %>${page.url}?pageNo=${pno }${page.params}'>${pno }</a></li>			
							</c:when>
							<c:otherwise>
								<li><a href='<%=basePath %>${page.url}?pageNo=${pno  }${page.params}'>${pno }</a></li>		
							</c:otherwise>
						</c:choose>
	                </c:forEach>
					<c:if test="${page.actulPageNo  < page.totalPageNo }">
	                	<li><a href='<%=basePath %>${page.url}?pageNo=${page.actulPageNo+1 }${page.params}'>下一页</a></li>
	                </c:if>
	                <li><a href='<%=basePath %>${page.url}?pageNo=${page.totalPageNo }${page.params}'>尾页</a></li>
	            </ul>
	        </div>
        </c:if>
     </div>
    </body>
    
    <script>
    $(function(){
    	$.Huifold("#Huifold1 .item h4","#Huifold1 .item .info","fast",1,"click");
    	
    	$('.orderByRadio').iCheck({
    		checkboxClass: 'icheckbox-blue',
    		radioClass: 'iradio-blue',
    		increaseArea: '20%'
    	});
    	
    	$("#Huifold1 .item h4").click();
    	
    });
    </script>
</html>